<!--
 @description
 @fileName Item.vue
 @author zengqiongying
 @created 2022/11/04 13:38:01
-->
<template>
  <div class="audio-content" @click="handleTigger">
    <div class="voice">
      <div v-if="play" class="voice-note">
        <span class="note-one" />
        <span class="note-two" />
        <span class="note-three" />
        <span class="note-four" />
        <span class="note-five" />
        <span class="note-one" />
        <span class="note-two" />
      </div>
    </div>
    <div class="time">{{ timeTxt }}</div>
    <Player
      v-if="hasVoice"
      ref="player"
      :src="src"
      class="hide-player"
      @ready="handlePlayerReady"
      @end="handlePlayerEnd"
      @error="handlePlayerError"
      @duration="handlePlayerDuration"
      @update-time="handlePlayerUpdateTime"
    />
  </div>
</template>

<script>
import Player from './Player'
export default {
  name: 'AudioItem',
  components: {
    Player
  },
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      canPlay: false, // 是否可播放
      play: false, // 播放状态，true为正在播放
      totalLength: 0, // 音频总时长
      curLength: 0, // 当前播放时长
      errorMsg: '', // 音频加载错误提示
      totalTime: '', // 格式化后的总时长
      cutTime: '' // 格式化以后的当前时间
    }
  },

  computed: {
    timeTxt() {
      if (this.errorMsg) {
        return this.errorMsg
      }
      if (this.canPlay) {
        // return `${this.totalTime}/${this.cutTime}`
        return `${Math.floor(this.totalLength * 10) / 10}″`
      }
      return ''
    },
    hasVoice() {
      return this.src && this.src.length
    }
  },

  created() {},
  activated() {},
  mounted() {

  },

  methods: {
    handleTigger() {
      if (!this.canPlay || this.totalLength === 0) {
        this.$toast('音频文件读取异常，无法播放')
        return
      }
      this.play = !this.play
      this.$refs.player.audioPlay(this.play)
    },
    handlePlayerError() {
      this.errorMsg = '音频文件读取异常'
    },
    handlePlayerReady() {
      this.canPlay = true
      this.errorMsg = ''
    },
    handlePlayerEnd() {
      this.play = false
    },
    handlePlayerDuration(d) {
      this.totalLength = d
    },
    handlePlayerUpdateTime(d) {
      this.curLength = d.time
      this.totalTime = d.formatTotal
      this.cutTime = d.formatTime
    }
  }
}

</script>
<style lang='less' scoped>

  .hide-player{
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .audio-content{
    width: 200px;
    height: 36px;
    padding: 0 16px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background: #f0f4ff;
    border-radius: 0px 8px 8px 8px;
    .voice{
      flex: 1;
      display: flex;
      align-items: center;
      height: 10px;
      background: url(~@/assets/ic_audio.png) no-repeat;
      background-size: auto 20px;
      background-position:left center;
      .voice-note{
        background: #f0f4ff;
        height: 10px;
        display: flex;
        align-items: center;
        span{
          width: 2px;
          height: 100%;
          margin-right: 2px;
          background-color: #3C4458;
          vertical-align: middle;
          display: inline-block;
        }
      }
    }
  }
</style>

<style scoped>
  .note-one {
    animation: yuying1 1s infinite 0.1s;
    -webkit-animation: yuying1 1s infinite 0.1s;
  }

  .note-two {
    animation: yuying1 0.7s infinite 0.2s;
    -webkit-animation: yuying1 0.7s infinite 0.2s;
  }
  .note-three {
    animation: yuying1 0.7s infinite 0.3s;
    -webkit-animation: yuying1 0.7s infinite 0.3s;
  }

  .note-four {
    animation: yuying1 0.7s infinite 0.4s;
    -webkit-animation: yuying1 0.7s infinite 0.4s;
  }

  .note-five {
    animation: yuying1 0.7s infinite 0.5s;
    -webkit-animation: yuying1 0.7s infinite 0.5s;
  }
@keyframes yuying1 {
		0% {
			height: 0%;
		}

		20% {
			height: 50%;
		}

		50% {
			height: 100%;
		}

		80% {
			height: 50%;
		}

		100% {
			height: 0%;
		}
	}
</style>
